<template>
  <div class="container">
    <div class="card-container">
      <el-card class="card">
        <h2>校园外卖商家注册中心</h2>
        <div class="form">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="登录名：" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="password2">
              <el-input type="password" v-model="form.password2"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('form')">注册</el-button>
              <el-button @click="onBack()">返回</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
  export default {
    name: "Register",
    data(){
      let userNameIsExist = (rule, value, callback) => {
        this.$axios.post("/isExist",{
          username: this.form.username
        }).then(res=>{
          console.log(res)
          if(res.data == false){
            callback(new Error("用户名已被占用！"))
          }else{
            callback();
          }
        }).catch(err=>{
          console.log(err)
        })
      };
      let validatePass2 = (rule, value, callback) => {
        if(value === ''){
          callback(new Error('请再次输入密码'));
        }else if(value !== this.form.password){
          callback(new Error('两次输入密码不一致！'))
        }else{
          callback();
        }
      };
      return{
        form:{
          username:"",
          password:"",
          password2:"",
        },
        rules:{
          username:[
            {required:true,message: '请输入用户名',trigger:'blur'},
            {min:3,max:16,message:'长度在 3 到 16 个字符',trigger:'blur'},
            {validator: userNameIsExist,trigger: 'blur'}
          ],
          password:[
            {required:true,message: '请输入密码',trigger:'blur'},
            {min:6,max:16,message:'长度在 6 到 16 个字符',trigger:'blur'}
          ],
          password2:[
            {required:true,validator: validatePass2, trigger: 'blur'}
          ]
        }
      }
    },
    methods:{
      onSubmit(form){
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.$axios.post("/register",this.form).then(res=>{
              if(res.data.code == 200){
                this.$router.replace("/")
              }
            }).catch(err=>{
              console.log(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      onBack(){
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .container{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-container{
    width:500px;
    margin-top: 50px;
  }
  .card{
    padding: 0 20px;
  }
</style>